<!--
 * @Description: 添加
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-05-06 20:46:42
 * @FilePath: /yuxiuproweb/src/views/goods/decorate/mads/add.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="1100px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-card class="box-card grid-box-card" shadow="hover">
        <div slot="header">
          <span class="title">商品原料</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="品名" prop="name">
              <el-input v-model="form.name" placeholder="请输入品名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售型号" prop="salesModel">
              <el-input
                v-model="form.salesModel"
                placeholder="请输入销售型号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售别名" prop="salesAlias">
              <el-input
                v-model="form.salesAlias"
                placeholder="请输入销售别名"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单重" prop="pieceWeight">
              <el-input-number
                style="width: 100%"
                v-model="form.pieceWeight"
                placeholder="请输入单重"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用" prop="enableFlag">
              <el-switch
                v-model="form.enableFlag"
                active-value="Y"
                inactive-value="N"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最小起算" prop="minimum">
              <el-input v-model="form.minimum" placeholder="请输入最小起算" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="采购方式" prop="procurementMethod">
              <el-radio-group v-model="form.procurementMethod">
                <el-radio label="0">自生产</el-radio>
                <el-radio label="1">外采购</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售信息" prop="marketingInfo">
              <el-input
                v-model="form.marketingInfo"
                placeholder="请输入销售信息"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加工信息" prop="processInfo">
              <el-input
                v-model="form.processInfo"
                placeholder="请输入加工信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="sku 图" prop="skuPicture">
              <image-upload v-model="form.skuPicture" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">价格相关数据</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="价格模型" prop="priceModel">
              <el-select
                v-model="form.priceModel"
                placeholder="请选择价格模型"
                style="width: 100%"
              >
                <el-option label="默认" value="0" />
                <el-option label="布按米" value="1" />
                <el-option label="布按套" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-descriptions
              class="open-right"
              direction="vertical"
              :column="2"
              border
            >
              <el-descriptions-item label="价格">单价</el-descriptions-item>
              <el-descriptions-item label="出厂价">
                <el-form-item label-width="0" prop="factoryPrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.factoryPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="16">
            <el-descriptions
              class="ml20 open-right"
              direction="vertical"
              :column="3"
              border
            >
              <el-descriptions-item label="价格"
                >单价<span style="color: red"
                  >(默认价格)</span
                ></el-descriptions-item
              >
              <el-descriptions-item label="经销价">
                <el-form-item label-width="0" prop="wholesalePrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.wholesalePrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="零售价">
                <el-form-item label-width="0" prop="retailPrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.retailPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card grid-box-card open-right mt20" shadow="hover">
        <div slot="header">
          <span class="title">模型相关数据</span>
          <el-button
            type="primary"
            plain
            size="mini"
            class="ml10"
            @click="model.show = true"
            >选择模型</el-button
          >
          <span
            v-if="productModel"
            class="ml10"
            style="color: rgb(150, 150, 150)"
            >模型名：{{ productModel.modelName }}</span
          >
        </div>
        <el-table :data="fabricList">
          <el-table-column
            label="序号"
            align="center"
            prop="name"
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column label="类型" align="center" prop="type">
            <template slot-scope="{ row }">
              {{ row.type === "0" ? "面料" : row.type === "1" ? "辅料" : "" }}
            </template>
          </el-table-column>
          <el-table-column label="品名" align="center" prop="name">
            <template slot-scope="{ row, $index }">
              <el-link type="primary" @click="selectName(row, $index)">{{
                row.name || "未选料"
              }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="位置" align="center" prop="part" />
          <el-table-column label="用料方向" align="center" width="360">
            <template slot-scope="{ row }" label-width="0">
              <el-form :model="row" inline>
                <el-form-item prop="widhtLt">
                  <el-input-number
                    style="width: 80px"
                    v-model="row.widhtLt"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
                <el-form-item><span>≤ 宽度 ≤</span></el-form-item>
                <el-form-item prop="widhtGt">
                  <el-input-number
                    style="width: 80px"
                    v-model="row.widhtGt"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
                <el-form-item prop="heightOrWidht">
                  <el-select
                    v-model="row.heightOrWidht"
                    placeholder="请选择"
                    style="width: 80px"
                  >
                    <el-option label="定宽" value="0" />
                    <el-option label="定高" value="1" />
                  </el-select>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
    <!-- 选择模型 -->
    <model-part-view
      v-if="model.show"
      :show.sync="model.show"
      v-bind="model"
      @on-change="handleModelChange"
    ></model-part-view>
    <!-- 选择面料 -->
    <fabric-part-view
      v-if="fabric.show"
      :show.sync="fabric.show"
      @on-change="handlePartChange($event, 1)"
    ></fabric-part-view>
    <!-- 选择材料(辅料) -->
    <other-part-view
      v-if="other.show"
      :show.sync="other.show"
      @on-change="handlePartChange($event, 2)"
    ></other-part-view>
  </el-dialog>
</template>

<script>
import { getCurtain, addCurtain, updateCurtain } from "@/api/goods/decorate";
import { listProductModelFabric } from "@/api/process/vm";
import ModelPartView from "@/views/process/vm/mods/part.vue";
import FabricPartView from "@/views/material/fabric/mods/part.vue";
import OtherPartView from "@/views/material/other/mods/radioPart.vue";
export default {
  components: {
    ModelPartView,
    FabricPartView,
    OtherPartView,
  },
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      model: {
        show: false,
      },
      productModel: null, // 模型数据
      fabricList: [],
      fabric: {
        show: false,
        data: null,
      },
      other: {
        show: false,
        index: -1,
      },
      // 表单参数
      form: {
        customWindowCurtainId: null,
        name: null,
        salesModel: null,
        salesAlias: null,
        pieceWeight: null,
        enableFlag: "N",
        minimum: null,
        procurementMethod: "0",
        marketingInfo: null,
        processInfo: null,
        skuPicture: null,
        priceModel: null,
        factoryPrice: null,
        wholesalePrice: null,
        retailPrice: null,
        productModelId: null,
      },
      // 表单校验
      rules: {},
    };
  },
  computed: {
    title() {
      return {
        add: "添加定制窗幔",
        edit: "修改定制窗幔",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    }
  },
  methods: {
    /** 修改按钮操作 */
    handleUpdate() {
      const customWindowCurtainId = this.data.customWindowCurtainId;
      getCurtain(customWindowCurtainId).then((response) => {
        this.form = response.data;
        this.productModel = this.form.productModel;
        this.fabricList = this.form.fabricList;
      });
    },
    /** 选择商品模型回调 */
    handleModelChange(data) {
      this.productModel = {
        ...data,
      };
      this.getListProductModelFabric();
    },
    /** 选择品名 */
    selectName(row, index) {
      if (row.type === "0") {
        this.fabric = {
          show: true,
          index,
        };
      } else if (row.type === "1") {
        this.other = {
          show: true,
          index,
        };
      }
    },
    /** 选择主布 */
    // handleFabricChange(data) {
    //   const fabricItem = this.fabricList[this.fabric.index];
    //   fabricItem.name = data.name;
    //   fabricItem.fabricId = data.mdFabricId;
    //   this.$set(this.fabricList, this.fabric.index, fabricItem);
    // },
    /** 选择材料回调 */
    handlePartChange(data, state) {
      const row =
        this.fabricList?.[state === 1 ? this.fabric.index : this.other.index];
      this.$set(
        this.fabricList,
        state === 1 ? this.fabric.index : this.other.index,
        {
          ...row,
          fabricId: data?.mdFabricId || data?.otherMaterialId,
          name: data?.name,
          width: data?.width || "",
        }
      );
    },
    /** 查询商品模型物料维护列表 */
    getListProductModelFabric() {
      listProductModelFabric({
        pageNum: 1,
        pageSize: 100,
        productModelId: this.productModel?.mdWindowCurtainModelId,
      }).then(({ rows }) => {
        this.fabricList = (rows || []).map((e) => {
          return {
            mdCustomWindowCurtainFabricId: "",
            fabricId: "",
            customWindowCurtainId: e.mdProductModelFabricId,
            name: "",
            type: e.type,
            enableFlag: e.enableFlag,
            part: e.part,
            heightOrWidht: "",
            widhtLt: "",
            widhtGt: "",
          };
        });
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.productModelId = this.productModel?.mdWindowCurtainModelId;
          this.form.fabricList = this.fabricList;
          if (this.form.customWindowCurtainId != null) {
            updateCurtain(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addCurtain(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
